<template>
  <div>
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '#' }" style="font-size: 20px;"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item style="font-size: 20px;"
          >图书管理</el-breadcrumb-item
        >
        <el-breadcrumb-item style="font-size: 20px;"
          >添加图书</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div style="width: 400px; margin-top: 50px;">
      <el-form
        :model="addBookInfoForm"
        :rules="rules"
        ref="addBookInfoForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="图片" prop="bookImage">
          <div class="profile">
            <img
              v-if="addBookInfoForm.bookImage"
              class="avatar"
              :src="addBookInfoForm.bookImage"
              alt="profile"
            />
            <!-- <img
              v-if="addBookInfoForm.bookImage"
              :src="addBookInfoForm.bookImage"
              class="avatar"
            /> -->
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <a href="javascript:;" class="file"
              >点击上传图片
              <input type="file"  @change="uploadBookImage" />
            </a>
          </div>
          <!-- <el-upload
            class="avatar-uploader"
            action=""
            :http-request="uploadBookImage"
            :show-file-list="false"
            :headers="headers"
          >
            <img
              v-if="addBookInfoForm.bookImage"
              :src="addBookInfoForm.bookImage"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->
        </el-form-item>
        <el-form-item label="显示名" prop="bookShowname">
          <el-input v-model="addBookInfoForm.bookShowname"></el-input>
        </el-form-item>
        <el-form-item label="图书名" prop="bookName">
          <el-input v-model="addBookInfoForm.bookName"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="bookAuth">
          <el-input v-model="addBookInfoForm.bookAuth"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="bookPress">
          <el-input v-model="addBookInfoForm.bookPress"></el-input>
        </el-form-item>
        <el-form-item label="出版时间" prop="pressDate">
          <el-col :span="11">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="addBookInfoForm.pressDate"
              placeholder="选择日期"
              type="date"
              style="width: 100%;"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="单价" prop="bookPrice">
          <el-input v-model="addBookInfoForm.bookPrice"></el-input>
        </el-form-item>

        <el-form-item label="库存量" prop="number">
          <el-input v-model="addBookInfoForm.number"></el-input>
        </el-form-item>
        <el-form-item label="类别" prop="typeId">
          <el-select style="width: 300px;" v-model="addBookInfoForm.typeId">
            <el-option
              v-for="item in selfBookTypes"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-button type="primary" @click="submitForm('addBookInfoForm')"
          >立即新增</el-button
        >
        <el-button @click="resetForm('addBookInfoForm')">重置</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addBookInfoForm: {
        bookShowname: "",
        bookName: "",
        bookImage: "",
        bookAuth: "",
        bookPress: "",
        pressDate: "",
        bookPrice: "",
        number: "",
        typeId: ""
      },
      headers: {
        token: localStorage.getItem("token")
      },
      rules: {
        bookShowname: [
          {
            required: true,
            message: "请输入显示名",
            trigger: "blur"
          }
        ],
        bookName: [
          {
            required: true,
            message: "书名",
            trigger: "blur"
          }
        ],
        bookImage: [
          {
            required: true,
            message: "请上传封面",
            trigger: "change"
          }
        ],
        bookAuth: [
          {
            required: true,
            message: "请输入作者名",
            trigger: "blur"
          }
        ],
        bookPress: [
          {
            required: true,
            message: "请输入出版社",
            trigger: "blur"
          }
        ],
        pressDate: [
          {
            required: true,
            message: "请选择出版日期",
            trigger: "change"
          }
        ],
        bookPrice: [
          {
            required: true,
            message: "请输入单价",
            trigger: "blur"
          }
        ],
        number: [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur"
          }
        ],
        typeId: [
          {
            required: true,
            message: "请选择图书类别",
            trigger: "change"
          }
        ]
      },
      selfBookTypes: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
          //time.getTime() > Date.now(); 选择今天及今天之前的日期；
          //time.getTime() > Date.now() - 3600 * 1000 * 24;选择今天之前的日期，不包括今天；
          //time.getTime() < Date.now();选择今天之后的日期；
          //time.getTime() < Date.now() - 3600 * 1000 * 24;选择今天及今天之后的日期；
        }
      }
    };
  },
  methods: {
    submitForm(addBookInfoForm) {
      this.$refs[addBookInfoForm].validate(valid => {
        if (valid) {
          //新增操作
          this.$http
            .post("/bookInfo/admin/addBookInfo", this.addBookInfoForm)
            .then(resp => {
              alert(resp.data.message);
              this.$refs[addBookInfoForm].resetFields();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(addBookInfoForm) {
      this.$refs[addBookInfoForm].resetFields();
    },
    uploadBookImage(e) {
      //图片上传操作
      //e为change对象，e.target为input标签对象
      //获取input标签中的内置对象files，里面存放文件信息
      console.log(e);
      //let file = e.file;
      let file = e.target.files[0];
      var formData = new FormData();
      //将文件信息存入表单数据对象中 传入后端
      formData.append("image", file);
      this.$http
        .post("/bookInfo/admin/uploadBookImage", formData, {
          //设置数据编码 表单数据对象专用
          "Content-Type": "multipart/form-data"
        })
        .then(resp => {
          //将头像路径保存到data区中
          alert(resp.data.message);
          this.addBookInfoForm.bookImage = resp.data.data;
        });
    },
    handleAvatarSuccess(res, file) {
      this.addBookInfoForm.bookImage = URL.createObjectURL(file.raw);
    },
    listSelfBookTypes() {
      this.$http.get("/bookType/admin/selectAllSelf").then(resp => {
        this.selfBookTypes = resp.data.data;
      });
    },
    handleSelectionChange(val) {
      this.ids = "";
      for (var i = 0; i < val.length; i++) {
        this.ids += val[i].id + ",";
      }
    }
  },
  created() {
    this.listSelfBookTypes();
  }
};
</script>

<style scoped>
.bread {
  margin-top: 50px;
  margin-left: 50px;
}

.file {
  position: relative;
  display: inline-block;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 4px 12px;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
}

.file input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}

.file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}

.profile img {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.34), -1px 1px 1px rgba(0, 0, 0, 0.34);
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>

<style>
.el-input__inner::placeholder {
  color: #31e5f5;
}
</style>
